<template>
  <div class="times">
    <el-config-provider :locale="locale">
      <el-date-picker
        style="width: 250px; border: 1px solid #e6f1ff"
        v-model="value1"
        type="daterange"
        range-separator="~"
        start-placeholder="请选择日期"
        end-placeholder="请选择日期 "
        unlink-panels
        @change="changeTime(value1)"
        @calendar-change="setTimes"
        :default-value="[new Date(2018, 9, 1), new Date(2022, 10, 1)]"
      />
    </el-config-provider>
  </div>
</template>
<script setup>
import { ref, toRaw, reactive } from "vue";
import { getTime, getTime1 } from "../../../utils/api/f_request";
import zhCn from "element-plus/dist/locale/zh-cn";

const value1 = ref("");
const locale = reactive(zhCn);
const emit = defineEmits(["changeTime", "tkTimes"]);
const changeTime = (v) => {
  // console.log(v);
  if (v) {
    let d = new Date(toRaw(v)[0]);
    let b = new Date(toRaw(v)[1]);
    let time = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
    let time1 = b.getFullYear() + "-" + (b.getMonth() + 1) + "-" + b.getDate();
    getTime({ time, time1 }).then((data) => {
      emit("changeTime", data.data.data);
    });
    getTime1({ time, time1 }).then((data) => {
      emit("tkTimes", data.data.data);
    });
  } else {
    let time = "2018-1-8";
    let time1 = "2022-2-2";
    getTime({ time, time1 }).then((data) => {
      emit("changeTime", data.data.data);
    });
    getTime1({ time, time1 }).then((data) => {
      emit("tkTimes", data.data.data);
    });
  }
};
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
];
//默认时间
const setTimes = () => {};
</script>
<style scoped lang="scss">
.times {
  margin-left: 2%;
  cursor: pointer;
}
</style>